class Swiper {
    constructor(id) {
        //初始化操作 属性
        this.root = document.querySelector(id)
        this.swiperWraper = this.root.querySelector('.swiper') //相框 
        this.prev = this.root.querySelector('.prev') // 上一张
        this.next = this.root.querySelector('.next') // 下一张
        this.olEle = this.root.querySelector('ol') //指示器
        this.lisEle = this.root.querySelectorAll('.swiper li')
        this.count = this.lisEle.length //轮播元素个数 
        this.isMove = false //是否运行中
        this.index = 0 // 页号指示器序号

        this.createNextPrev()
        this.createPointer()
        this.olis = this.root.querySelectorAll('ol li') //所有指示器

        // this.swiperWidth = parseInt(window.getComputedStyle(this.swiperWraper).width) //元素非行间样式宽
        this.swiperWidth = parseInt(window.getComputedStyle(this.swiperWraper.firstElementChild).width) //元素非行间样式宽
        // console.log(this.swiperWidth ) //宽度是400不是2800

        this.setClick()
    }

    /**
     * 创建前一元素后一元素
     */
    createNextPrev() {
        const firstEle = this.root.querySelector('.swiper li:first-child')
        const lastEle = this.root.querySelector('.swiper li:last-child')
        //复制第一张放到最后面
        let newFirst = firstEle.cloneNode(true)
        this.swiperWraper.appendChild(newFirst)
        //复制最后一张放到最前面
        let newLast = lastEle.cloneNode(true)
        this.swiperWraper.insertBefore(newLast, firstEle)
    }
    /**
     * 指示器小圆
     */
    createPointer() {
        for (let i = 0; i < this.count; i++) {
            let liEle = document.createElement('li') //<li></li>
            if (i == 0) {
                liEle.className = 'active'
            }
            this.olEle.appendChild(liEle)
        }
    }
    /**
     * 清除所有指示器选中样式
     */
    clearActive() {
        for (let i = 0; i < this.olis.length; i++) {
            this.olis[i].classList.remove('active')
        }
    }
    /**
     * 设置指示器选中效果
     */
    setCurrentActive() {
        this.clearActive()
        this.olis[this.index].classList.add('active')
    }
    /**
     * 下一张
     */
    onNext() {
        let swiperWidth = this.swiperWidth

        if (this.isMove == false) {
            if (++this.index > this.count - 1) {
                this.index = 0
            }
            this.setCurrentActive()
            this.move(this.swiperWraper, {
                offset: -swiperWidth,
                time: 1000,
                rate: 30
            })
        }
    }

    /**
     * 上一张
     */
    onPrev() {
        let swiperWidth = this.swiperWidth
        if (this.isMove == false) {
            if (--this.index < 0) {
                this.index = this.count - 1
            }
            this.setCurrentActive()
            this.move(this.swiperWraper, {
                offset: swiperWidth,
                time: 1000,
                rate: 30
            })
        }
    }

    /**
     * 绑定事件
     */
    setClick() {
        this.next.onclick = () => {
            this.onNext()
        }
        this.prev.onclick = () => {
            this.onPrev()
        }
    }

    /**
     * 自动轮播
     * @param {*} isPlay 
     */
    autoPlay(isPlay = false) {
        let _this = this
        if (isPlay) {

            //每隔2000执行 onPrev
            // setInterval(() => {
            //     this.onPrev()
            // }, 2000)

            let startTime

            function moveFn(now) {
                if (!startTime) {
                    startTime = now
                }
                if (now - startTime >= 4000) {
                    startTime = now
                    _this.onPrev()
                }
                requestAnimationFrame(moveFn)
            }

            requestAnimationFrame(moveFn)

        }
    }

    /**
     * 运动函数
     */
    move(ele, option = {
        offset: 400,
        time: 1000,
        rate: 30
    }) {
        let _this = this
        this.isMove = true //表示运动开始
        ele.style.left = window.getComputedStyle(ele).left //获取当前初始值,非行间样式使用window.getComputedStyle()
        let offset = option.offset //移动偏移量
        let rate = option.rate //移动间隔时间，也就是移动速度
        let time = option.time //移动总时间
        let distance = rate * offset / time //每次移动的距离

        let goal = parseInt(ele.style.left) + offset //目标位置 = 当前位置+偏移量

        let timer = setInterval(function () {
            //到达目标位置结束定时器                   目标位置 - 当前位置 < 每次移动距离
            if (parseInt(ele.style.left) == goal || Math.abs((Math.abs(goal) - Math.abs(parseInt(ele
                    .style.left)))) < Math.abs(distance)) {
                ele.style.left = goal + 'px'
                clearInterval(timer)

                // 向左边界处理
                if (parseInt(ele.style.left) == -offset * (_this.count + 1)) {
                    ele.style.left = -_this.swiperWidth + 'px'
                } else if (parseInt(ele.style.left) == 0) {
                    ele.style.left = -option.offset * _this.count + 'px'
                }
                _this.isMove = false
            } else {
                //元素现在位置   =     当前位置 + 每次移动距离
                ele.style.left = (parseInt(ele.style.left) + distance) + 'px'
            }
        }, rate)
    }
}





/**获取数据
 * */
function loadMainDate() {
    $.ajax({
        url:'http://www.xiongmaoyouxuan.com/api/tab/1',
        type:'get',
        headers:{
            'x-platform':'pc'
        },
        success:function(result){
            if(result.code===200){
                let banners=result.data.banners
                //商品数据
                let productList=result.data.items.list
                showProductList(productList)
            }
        }
    })
}

let list=[]
/*加载商品
**/ 
    function showProductList(productList){
        list=[...list,...productList]
        //这里定义一个模板
        let data={productList:list
        }
        /**渲染模板数据*/
     let htmlStr=template('product-list-temp',data )
    //  给代码设置相应的元素
    $('.mini-box').html(htmlStr)
    }



/**
 * 加载列表数据
 * */ 
function loadProductList(pageNo){
    $.ajax({
        url:'http://www.xiongmaoyouxuan.com/api/tab/1/feeds',
        type:'get',
        data:{
            start:pageNo*20 //开始的起始序号
        },
        success:function(result){
            if(result.code===200){
                    let productList=result.data.list

                    //2.渲染商品数据
                    showProductList(productList)
            }

        }
    })
}


/**
* 加载更多
*/
function loadMore(){
    let pageNo=0 //代表的是页号
    //绑定点击事件 
$('.btna').on('click',function(){
    
    //1.调用当前列表数据，获取商品列表数据
    loadProductList(++pageNo)
    

})
}



/*
*九块九包邮跳转
 */ 
function jiukuaijiu(){
    location.href="./html/baoyou9.html"
}


// 首页跳转
function shouye(){
    location.href="../index.html"
}
    

// 商品详情页
function onProductDet(id){
    // 1.跳转到商品详情页面
    // alert(id)    
    location.href="./html/produtDetails.html?id="+id
}
    loadMainDate()
    loadMore()